<template>
  <div class="comment-container">
    <!-- 热门评论区容器 -->
    <div v-if="isShowHot">
      <div class="font-16 font-bold">热门评论</div>
      <comment :comment="hotComment.hotComments"></comment>
    </div>
    <!-- 普通评论区容器 -->
    <div>
      <div class="top-area flex">
        <div class="font-16 font-bold">最新评论({{ comment.totalCount }})</div>
        <div class="sort-type-btn">
          <span class="font-12">排序: </span>
          <button v-for="(item, index) in sortTypeArr" :key="index" class="mgl-6 font-12 pointer sort-btn" :class="{ active: typeIsActive === index }" @click="sortChange(index)">{{ item }}</button>
        </div>
      </div>
      <comment :comment="comment.comments"></comment>
    </div>

    <el-pagination
      class="mgt-20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="exQueryInfo.pageNo"
      :page-sizes="[15, 20, 50]"
      :page-size="exQueryInfo.pageSize"
      layout="sizes, prev, pager, next, jumper"
      :total="comment.totalCount">
    </el-pagination>
  </div>
</template>

<script>

import { getHotComment, getComment } from '@/api/comment.js'
import Comment from '@/components/Comment/comment.vue'
export default {
  data () {
    return {
      hotComment: {},
      comment: {},
      // 排序条件
      sortTypeArr: ['按推荐', '按热度', '按时间'],
      typeIsActive: 0,
      // 加上分页的查询条件
      exQueryInfo: {
        pageNo: 1,
        pageSize: 15,
        sortType: 0,
        cursor: ''
      }
    }
  },
  watch: {
    'queryInfo.id': {
      immediate: true,
      handler (newVal) {
        this.showComment()
      }
    }
  },
  props: {
    // 普通评论查询条件,queryInfo: { id, type, pageNo, pageSize, sortType, cursor },
    // 但我认为外面只传id和type就行了,其他条件都在这个组件里来做
    queryInfo: {
      type: Object
    },
    // 热门评论查询条件,hotQueryInfo: { id, type, limit, offset, before }
    hotQueryInfo: {
      type: Object
    },
    // 是否显示热门评论
    isShowHot: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Comment
  },
  methods: {
    // 获取并展示评论
    async showComment () {
      // 按时间排序时要将上一条数据的cursor传入
      if (this.exQueryInfo.pageNo !== 1 && this.exQueryInfo.sortType === 3) {
        this.exQueryInfo.cursor = this.comment.cursor
      }
      // 获取普通评论
      const res2 = await getComment({ ...this.queryInfo, ...this.exQueryInfo }) // 解构合并对象
      this.comment = res2.data.data
      // 要显示热门评论才发请求
      if (this.isShowHot) {
        const res = await getHotComment(this.hotQueryInfo)
        this.hotComment = res.data
      }
    },
    // 监听每页多少条的变化
    handleSizeChange (newSize) {
      this.exQueryInfo.pageSize = newSize
      this.showComment()
    },
    // 监听页码发生变化
    handleCurrentChange (newPage) {
      this.exQueryInfo.pageNo = newPage
      this.showComment()
    },
    // 评论排序改变
    sortChange (newSortType) {
      // 激活被选的按钮
      this.typeIsActive = newSortType
      // 1 按推荐, 2 按热度, 3 按时间,所以index要加1
      this.exQueryInfo.sortType = newSortType + 1
      this.showComment()
    }
  }
}
</script>

<style lang="less" scoped>
.comment-container {
  width: 800px;
  text-align: left;
}
.top-area {
  width: 800px;
  justify-content: space-between;
}
.sort-type-btn {
  line-height: 100%;
  height: 100%;
}
.sort-btn {
  width: 60px;
  line-height: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: rgb(248, 225, 225);
}
.active {
  background-color: rgb(240, 169, 169);
}

</style>
